// src/pages/goods/goods.vue
<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>

<template>
  <scroll-view scroll-y class="viewport">
    <view class="goods">
      <!-- 卡片主图 -->
      <view class="preview">
        <swiper circular>
          <swiper-item>
            <image
              mode="aspectFill"
              src="https://img2.imgtp.com/2024/03/22/Y5uhBH2i.jpg"
            />
          </swiper-item>
          <swiper-item>
            <image
              mode="aspectFill"
              src="https://img2.imgtp.com/2024/03/22/j2Cs0RLR.jpg"
            />
          </swiper-item>
          <swiper-item>
            <image
              mode="aspectFill"
              src="https://img2.imgtp.com/2024/03/22/Y5uhBH2i.jpg"
            />
          </swiper-item>
          <swiper-item>
            <image
              mode="aspectFill"
              src="https://img2.imgtp.com/2024/03/22/j2Cs0RLR.jpg"
            />
          </swiper-item>
          <swiper-item>
            <image
              mode="aspectFill"
              src="https://img2.imgtp.com/2024/03/22/Y5uhBH2i.jpg"
            />
          </swiper-item>
        </swiper>
        <view class="indicator">
          <text class="current">1</text>
          <text class="split">/</text>
          <text class="total">5</text>
        </view>
      </view>
    </view>
    <view class="title">
      <text>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;又快到一年一次的毕业季了🎉，学生党们旅游攻略可以做起来啦✌为大家整理了国内最适合穷游的十大城市，看见赶紧码住哦❤️</text>
      <text>有机会一定要多出去走走~喜欢旅游的宝子们计划起来吧!</text>
    </view>
    <navigator :url="`/pages/item/item`">
      <view class="tag">
      #毕业季 #旅行 #想去的地方总有一天会抵达 #毕业旅行
      </view>
    </navigator>
    <view class="time">2023-10-02</view>
    <view class="divider"></view>
    <view class="comment">
      <view class="sum">共2条评论</view>
      <view class="comment-nav">
        <image
          src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo30pherg0h6i5g5p794980hl0qkjg2u68?imageView2/2/w/120/format/webp|imageMogr2/strip"
          mode="scaleToFill" class="img"
        />
        <view class="uni-input-wrapper input">
					<input class="uni-input" placeholder="有话要说, 快来评论" :value="inputClearValue" @input="clearInput" />
					<text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
				</view>
      </view>
      <view class="comment-item">
        <image
          src="https://sns-avatar-qc.xhscdn.com/avatar/645b7f3c86578b8c6ab3b068.jpg?imageView2/2/w/120/format/jpg|imageMogr2/strip"
          mode="scaleToFill" class="img"
        />
        <view class="msg">
          <view>小红薯ok</view>
          <view>西藏真穷游不了</view>
        </view>
        <view class="time">02-10</view>
        <view class="right">
          <view>回复</view>
          <view class="sum">33</view>
        </view>
      </view>
      <view class="comment-item">
        <image
          src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo310dip2ni6m605p8k9q08sonni6rv73o?imageView2/2/w/120/format/webp|imageMogr2/strip"
          mode="scaleToFill" class="img"
        />
        <view class="msg">
          <view>不语</view>
          <view>欲买桂花同载酒</view>
        </view>
        <view class="time">02-13</view>
        <view class="right">
          <view>回复</view>
          <view class="sum">25</view>
        </view>
      </view>
      <view class="comment-item">
        <image
          src="https://sns-avatar-qc.xhscdn.com/avatar/65d4d292b078c8a239567772.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip"
          mode="scaleToFill" class="img"
        />
        <view class="msg">
          <view>张好运🍀</view>
          <view>所有城市都去过</view>
        </view>
        <view class="time">03-30</view>
        <view class="right">
          <view>回复</view>
          <view class="sum">56</view>
        </view>
      </view>
      <view class="comment-item">
        <image
          src="https://sns-avatar-qc.xhscdn.com/avatar/5e7767fc0000000001005d41.jpg?imageView2/2/w/540/format/webp|imageMogr2/strip28"
          mode="scaleToFill" class="img"
        />
        <view class="msg">
          <view>凉笙墨染</view>
          <view>我也想出去玩姐</view>
        </view>
        <view class="time">10-09</view>
        <view class="right">
          <view>回复</view>
          <view class="sum">78</view>
        </view>
      </view>
      <view class="comment-item">
        <image
          src="https://sns-avatar-qc.xhscdn.com/avatar/64957ef6539b8df857ec34b8.jpg?imageView2/2/w/120/format/jpg|imageMogr2/strip"
          mode="scaleToFill" class="img"
        />
        <view class="msg">
          <view>start again</view>
          <view>西藏真美丽的哦</view>
        </view>
        <view class="time">09-31</view>
        <view class="right">
          <view>回复</view>
          <view class="sum">456</view>
        </view>
      </view>
    </view>
  </scroll-view>
  <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
    <view class="uni-input-wrapper input">
					<input class="uni-input" placeholder="有话要说, 快来评论" :value="inputClearValue" @input="clearInput" />
					<text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
				</view>
    <view class="icons">
      <button class="icons-button"><text class="icon-heart"></text>收藏</button>
      <button class="icons-button" open-type="contact">
        <text class="icon-handset"></text>喜欢
      </button>
      <navigator class="icons-button" url="/pages/cart/cart" open-type="switchTab">
        <text class="icon-cart"></text>消息
      </navigator>
    </view>
  </view>
</template>

<style lang="scss">
.viewport {
  background-color: #f4f4f4;
  .title {
    margin-top: 20px;
    line-height: 30px;
  }
  .tag {
    margin-top: 10px;
    color: #13386c;
  }
  .time {
    margin-top: 10px;
    margin-left: 6px;
    color: #ccc;
  }
  .divider {
    background: #E0E3DA;
    width: 100%;
    height: 3rpx;
    margin-top: 20rpx;
  }
  .comment {
    margin-top: 20rpx;
    margin-left: 6px;
    .comment-nav {
      display: flex;
      margin-top: 10px;
    }
    .comment-nav .img {
      width: 70rpx;
      height: 70rpx;
      border-radius: 100%;
    }
    .input {
      width: 600rpx;
      margin-top: 3px;
      margin-left: 10px;
      border: 1px solid #ccc;
      padding: 5px;
      border-radius: 20px;
    }
    .comment-item {
      display: flex;
      margin-top: 20px;
      .msg {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
      }
      .img {
        width: 70rpx;
        height: 70rpx;
        border-radius: 100%;
      }
      .time {
        display: flex;
        margin-top: 22px;
        margin-left: 20px;
      }
      .right {
        display: flex;
        align-items: flex-end;
        margin-left: 12px;
        color: #ccc;
        .sum {
          margin-left: 90px;
          color: #000;
        }
      }
    }
  }
}

page {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 商品信息 */
.goods {
  background-color: #fff;
  .preview {
    height: 750rpx;
    position: relative;
    .image {
      width: 750rpx;
      height: 750rpx;
    }
    .indicator {
      height: 40rpx;
      padding: 0 24rpx;
      line-height: 40rpx;
      border-radius: 30rpx;
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      bottom: 30rpx;
      right: 30rpx;
      .current {
        font-size: 26rpx;
      }
      .split {
        font-size: 24rpx;
        margin: 0 1rpx 0 2rpx;
      }
      .total {
        font-size: 24rpx;
      }
    }
  }
  .meta {
    position: relative;
    border-bottom: 1rpx solid #eaeaea;
    .price {
      height: 130rpx;
      padding: 25rpx 30rpx 0;
      color: #fff;
      font-size: 34rpx;
      box-sizing: border-box;
      background-color: #35c8a9;
    }
    .number {
      font-size: 56rpx;
    }
    .brand {
      width: 160rpx;
      height: 80rpx;
      overflow: hidden;
      position: absolute;
      top: 26rpx;
      right: 30rpx;
    }
    .name {
      max-height: 88rpx;
      line-height: 1.4;
      margin: 20rpx;
      font-size: 32rpx;
      color: #333;
    }
    .desc {
      line-height: 1;
      padding: 0 20rpx 30rpx;
      font-size: 24rpx;
      color: #cf4444;
    }
  }
  .action {
    padding-left: 20rpx;
    .item {
      height: 90rpx;
      padding-right: 60rpx;
      border-bottom: 1rpx solid #eaeaea;
      font-size: 26rpx;
      color: #333;
      position: relative;
      display: flex;
      align-items: center;
      &:last-child {
        border-bottom: 0 none;
      }
    }
    .label {
      width: 60rpx;
      color: #898b94;
      margin: 0 16rpx 0 10rpx;
    }
    .text {
      flex: 1;
      -webkit-line-clamp: 1;
    }
  }
}
.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: #fff;
  height: 100rpx;
  padding: 0 20rpx var(--window-bottom);
  border-top: 1rpx solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: content-box;
  .icons {
    padding-right: 10rpx;
    display: flex;
    align-items: center;
    flex: 1;
    .icons-button {
      flex: 1;
      text-align: center;
      line-height: 1.4;
      padding: 0;
      margin: 0;
      border-radius: 0;
      font-size: 20rpx;
      color: #333;
      background-color: #fff;
      &::after {
        border: none;
      }
    }
    text {
      display: block;
      font-size: 34rpx;
    }
  }
}
</style>
